<template>
  <div class="home-view">
    <sub-nav mold="quickNav"></sub-nav>
    <list mold="thumbnail" :items="events"></list>
    <infinite-loading :on-infinite="onInfinite" ref="infiniteLoading">
      <loading slot="spinner"></loading>
    </infinite-loading>
  </div>
  
</template>

<script>
import { mapState, mapActions } from 'vuex'
import InfiniteLoading from 'vue-infinite-loading'
import SubNav from '../components/SubNav'
import List from '../components/List'
import Loading from '../components/Loading'


export default {
  name: 'home-view',
  components: { SubNav, List, InfiniteLoading,Loading},
  data : function() {
    return {
    	
    }
  },
//created(){
//	this.$store.dispatch('getMessage');
//},
  computed: {
    // Getting Vuex State from store/modules/activities
    ...mapState({
      events: state => state.activities.events
    })
  },
  methods: {
  	onInfinite(){
  		setTimeout(()=>{
  			this.getMessage()
  			this.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded')
  		},1000)
  	},
    ...mapActions([
    	'getMessage'
    ])
  }
}
</script>

<style lang="scss" scoped>
.sub-nav {
  margin: 0 1.8rem;
  padding-top: 0.2rem;
}
</style>